<template>
  <div class="loading">
    <div class="loaders">
      <div class="loadings">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
      </div>
    </div> 
  </div>
</template>

<script>
  export default {
    name: 'loading',
    data () {
      return {}
    },
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .loading{
    position: fixed;
    top:0;
    left:0;
    z-index:121;
    width: 100%;
    height: 100%;
    /*background: rgba(0,0,0,0.3);*/
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    position: fixed;
    z-index: 200;
  }
.loaders{
    width: 70vw;
    display: flex;
    justify-content: center;
    position: absolute;
    z-index: 110;
    top: 40%;
    left: 50%;
    display: block;
}
.loadings { position:relative;}
.loadings i{ display:block; width:15px;height:15px;border-radius:50%; background-color:#428bca; position:absolute;}
.loadings i:nth-child(1){top:25px;left:0;-webkit-animation:loading 1s ease 0s infinite;}
.loadings i:nth-child(2){top:17px;left:17px;-webkit-animation:loading 1s ease -0.12s infinite;}
.loadings i:nth-child(3){top:0px;left:25px;-webkit-animation:loading 1s ease -0.24s infinite;}
.loadings i:nth-child(4){top:-17px;left:17px;-webkit-animation:loading 1s ease -0.36s infinite;}
.loadings i:nth-child(5){top:-25px;left:0;-webkit-animation:loading 1s ease -0.48s infinite;}
.loadings i:nth-child(6){top:-17px;left:-17px;-webkit-animation:loading 1s ease -0.6s infinite;}
.loadings i:nth-child(7){top:0px;left:-25px;-webkit-animation:loading 1s ease -0.72s infinite;}
.loadings i:nth-child(8){top:17px;left:-17px;-webkit-animation:loading 1s ease -0.84s infinite;}
@-webkit-keyframes loading{
    50%{ transform:scale(0.4); opacity:.4;}
    100%{ transform:scale(1); opacity:1;}
}
</style>